.mall {
  // height: 100vh;
  overflow: hidden;

  .scroll {
    height: calc(100vh - 110px);
    overflow-y: scroll;
  }

  .content {
    margin: 25px 21px 0 22px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .item {
      // border: 1px #fff solid;
      box-sizing: border-box;
      padding: 1px;
      width: 100px;
      // height: 143px;
      padding-bottom: 8px;
      text-align: center;
      margin-bottom: 16px;
      margin-right: 16px;
      // background-color: rgba(255, 255, 255, 0.1);
      background-color: var(--product-item_bg);
      border-radius: 12px;
      // overflow: hidden;
      // background: url('../../images/product_bg.png') no-repeat;
      // background-size: contain;
      // overflow: hidden;
      position: relative;
      border: 1px solid transparent;

      .tag {
        position: absolute;
        right: 0;
        top: -0px;
        width: 50px;
        height: 15px;
        font-size: 12px;
        // background: url('../../images/Subtract.png') no-repeat;
        // background-size: contain;
        background-color: #ff4747;
        border-radius: 4px 4px 4px 0;
        color: #fff;

        span {
          display: inline-block;
          zoom: 0.82;
        }
      }

      &.active {
        border: 1px solid;
        border-color: var(--product-select-border_color);
        // background: url('../../images/select_pro_border.png') no-repeat;
        // background-size: contain;
      }

      &:nth-of-type(3n + 3) {
        margin-right: 0;
      }

      .item_img {
        padding: 1px;
        overflow: hidden;
        padding: 6px 6px 2px 6px;
        box-sizing: border-box;

        // background-color: rgba(#D9D9d9, .3);
        img {
          height: 95px;
          width: 100%;
          height: 100%;
        }
      }

      .item_tit {
        margin: 6px 0 1px 0;
        font-size: 12px;
        height: 17px;
        line-height: 17px;
        color: var(--main-text-color);
      }

      .price {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: var(--main-text-color04);

        .unit_icon {
          width: 15px;
          height: 11px;
          background: var(--currency-icon-img) no-repeat;
          background-size: contain;
          margin-left: 2px;
        }
      }
    }
  }

  .menu_list {
    padding-top: 16px;
    display: flex;
    padding-left: 16px;

    // position: sticky;
    // top: 45px;
    .text {
      margin-right: 32px;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      height: 20px;
      color: var(--product-menu);
      // opacity: 0.6;

      &.active {
        color: var(--product-menu_active);
        font-weight: 500;
        opacity: 1;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .sku_content {
    background: var(--modal-mian-bg);
    padding-bottom: 18px;

    .image {
      position: relative;
      width: 120px;
      height: 120px;
      margin: 0 auto;

      .give_tag {
        padding: 2px 6px;
        font-size: 12px;
        transform: scale(0.85);
        display: block;
        position: absolute;
        right: 0;
        top: -8px;
        background: #ff6868;
        border-radius: 10px 0px 0px 10px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    color: var(--main-text-color);

    .name {
      height: 28px;
      line-height: 28px;
      font-size: 20px;
      font-weight: 400;
      text-align: center;
    }

    .sku_items {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      text-align: center;
      flex-wrap: wrap;

      &.simple {
        justify-content: center;

        .sku_item {
          margin-right: 0;
        }
      }

      .sku_item {
        margin-right: 24px;
        width: 89px;
        height: 60px;
        border-radius: 12px;
        background: var(--product-modal-sku_itemBg);

        margin-bottom: 16px;
        box-sizing: border-box;
        border: 2px solid transparent;

        &.active {
          border: 2px solid;
          border-color: var(--product-select-border_color);
          // background: url('../../images/sku_select.png') no-repeat;
          // background-size: contain;
        }

        &:nth-of-type(3) {
          margin-right: 0;
        }

        .expire {
          padding-top: 8px;
          font-weight: 500;
          font-size: 16px;
          height: 22px;
          line-height: 22px;
        }

        .price {
          height: 15px;
          line-height: 15px;
          font-size: 12px;
          font-weight: 300;
        }
      }
    }

    .pay_wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .my_wallet {
        height: 25px;
        align-items: center;
        display: flex;
        flex: 1;

        .icon {
          width: 22px;
          height: 18px;
          background: var(--currency-icon-img) no-repeat;
          // background-image: var(--currency-icon-img);
          background-size: contain;
        }

        .num {
          font-weight: 500;
          font-size: 18px;
          padding: 0 4px;
        }

        .recharge {
          color: #fff;
          font-size: 12px;
          height: 17px;
          line-height: 17px;

          span {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .pay_btn {
        font-weight: 500;
        width: 92px;
        height: 44px;
        line-height: 44px;
        border-radius: 12px;
        background: var(--button-main-bg);
        color: var(--button-main-color);
        font-size: 14px;
        text-align: center;

        // background: url('../../images/product_btn.png') no-repeat;
        // background-size: contain;
        &.send {
          width: 85px;
          height: 44px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          background: #55555b;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;

          .icon {
            width: 26px;
            height: 26px;
            background: url('../../images/send_icon.png') no-repeat;
            background-size: cover;
            margin-right: 4px;
          }
        }
      }
    }
  }

  .send_content {
    color: var(--main-text-color);
    // padding-bottom: 260px;
    height: 340px;

    .tit {
      text-align: center;
      font-weight: 500;
      font-size: 14px;
      padding-bottom: 16px;
    }

    .search_wrap {
      width: 100%;
      position: relative;
      margin-bottom: 12px;

      .search_icon {
        position: absolute;
        left: 6px;
        top: 3px;
        width: 26px;
        height: 26px;
        background: var(--search-icon-img) no-repeat;
        background-size: contain;
      }

      .search_btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 500;
        // color: #AFFBA1;
        color: var(--product-select-border_color);
        padding: 4px 4px;
      }

      .adm-input {
        width: 343px;
        height: 32px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 24px;
        padding: 6px 34px;
        box-sizing: border-box;
      }

      input {
        font-size: 16px;
        color: var(--main-text-color);
      }

      ::placeholder {
        color: rgba(255, 255, 255, 0.4);
        line-height: 32px;
      }
    }

    .list {
      height: 260px;
      overflow: scroll;

      .item {
        width: 343px;
        height: 74px;
        background-color: rgba(#d9d9d9, 0.1);
        border-radius: 12px;
        box-sizing: border-box;
        padding: 12px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user_info {
          display: flex;
          align-items: center;

          .avatar {
            background-color: #89eb8d;
            margin-right: 10px;
            width: 50px;
            height: 50px;
            border-radius: 12px;
            overflow: hidden;

            img {
              width: 100%;
            }
          }

          .info {
            line-height: normal;

            .name {
              font-weight: 500px;
            }

            .user_id {
              padding-top: 4px;
              font-size: 12px;
              color: var(--main-text-color04);
            }
          }
        }

        .send_btn {
          margin-right: 8px;
          color: #353944;
          text-align: center;
          line-height: 32px;
          border-radius: 16px;
          width: 72px;
          height: 32px;
          background: linear-gradient(127deg, #e0ff4d 13.85%, #89eb8d 97.81%);
        }
      }
    }
  }

  .special_number {
    width: 100%;
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    .n {
      display: inline-block;
      margin: 0 0.5px;
      &.n-0 {
        width: 9.259px;
        height: 13.939px;
        background: url('../../images/number/0.png') no-repeat;
        background-size: cover;
      }
      &.n-1 {
        width: 5.379px;
        height: 13.772px;
        background: url('../../images/number/1.png') no-repeat;
        background-size: cover;
      }
      &.n-2 {
        width: 8.593px;
        height: 13.906px;
        background: url('../../images/number/2.png') no-repeat;
        background-size: cover;
      }
      &.n-3 {
        width: 8.593px;
        height: 13.906px;
        background: url('../../images/number/3.png') no-repeat;
        background-size: cover;
      }
      &.n-4 {
        width: 9.059px;
        height: 13.576px;
        background: url('../../images/number/4.png') no-repeat;
        background-size: cover;
      }
      &.n-5 {
        width: 8.259px;
        height: 13.555px;
        background: url('../../images/number/5.png') no-repeat;
        background-size: cover;
      }
      &.n-6 {
        width: 8.959px;
        height: 13.572px;
        background: url('../../images/number/6.png') no-repeat;
        background-size: cover;
      }
      &.n-7 {
        width: 8.959px;
        height: 13.572px;
        background: url('../../images/number/7.png') no-repeat;
        background-size: cover;
      }
      &.n-8 {
        width: 8.959px;
        height: 13.872px;
        background: url('../../images/number/8.png') no-repeat;
        background-size: cover;
      }
      &.n-9 {
        width: 8.959px;
        height: 13.802px;
        background: url('../../images/number/9.png') no-repeat;
        background-size: cover;
      }

      // &.n-1 {
      //     width: 8px; height: 21px;
      //     background: url('../../images/number_bg.png') -3px -0px no-repeat;
      //     background-size: cover;
      // }
      // &.n-2 {
      //     width: 13px; height: 21px;
      //     background: url('../../images/number_bg.png') -60px -0px no-repeat;
      //     background-size: cover;
      // }
      // &.n-3 {
      //     width: 12px; height: 21px;
      //     background: url('../../images/number_bg.png') -14px 0px no-repeat;
      //     background-size: cover;
      // }
      // &.n-0 {
      //     width: 13px; height: 21px;
      //     background: url('../../images/number_bg.png') -120px 0px no-repeat;
      //     background-size: cover;
      // }
      // &.n-4 {
      //     width: 13px; height: 21px;
      //     background: url('../../images/number_bg.png') -140px 0px no-repeat;
      //     background-size: cover;
      // }
      // &.n-5 {
      //     width: 13px; height: 21px;
      //     background: url('../../images/number_bg.png') -31px 0px no-repeat;
      //     background-size: cover;
      // }
    }
    &.disabled {
      opacity: 0.4;
    }
  }
  .sale_down {
    position: absolute;
    width: 55px;
    height: 55px;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    z-index: 2;
    background: url('../../images/number/sale_down.png') no-repeat;
    background-size: contain;
  }
  .special_number_show {
    display: flex;
    justify-content: center;
    margin: 10px auto;
    .user_card {
      display: inline-flex;
      padding: 12px;
      align-items: flex-start;
      min-width: 136px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      // font-size: 16px;
      .avatar,
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
      .info {
        margin-left: 8px;
        .special_name {
          font-size: 16px;
          line-height: normal;
          margin-bottom: 2px;
        }
        .special_number_s {
          display: inline-flex;
          align-items: center;
          text-align: left;
          font-weight: 400;
          padding: 2px 6px;
          font-size: 12px;
          border-radius: 13.198px;
          line-height: normal;
          background: linear-gradient(303deg, #ff9430 5.59%, #ffb31e 100%);
          .icon {
            width: 12px;
            height: 12px;
            background: url('../../images/number/word.png') no-repeat;
            background-size: contain;
            display: inline-block;
            margin-right: 2px;
          }
        }
      }
    }
  }
}
#ymeng {
  .send {
    background: #ff6161;
  }
  .adm-input {
    background-color: rgba(#6167ff, 0.05);
  }
  .mall .send_content .list .item {
    background-color: rgba(#6167ff, 0.05);
  }
}
#gift_show {
  width: 120px;
  height: 120px;
}
